<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08 封装下拉菜单</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: pink;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="下拉菜单" id="btn">
    <div id="box"></div>
</body>
<script src="../common.js"></script>
<script>

    /* 
        封装显示隐藏页面元素的函数

    */

    function hideShow(istrue, ele) { // 了解
        if (istrue) {
            // 第一次ele显示
            ele.style.display = 'block';
        } else {
            ele.style.display = 'none';
        }
        istrue = !istrue;
    }

    var btn = getid('btn');
    var box = getid('box');
    var isok = true; // 全局变量

    btn.onclick = function() {
        hideShow(isok, box);
        if (isok) {
            isok = false;
        } else {
            isok = true;
        }
    }

</script>
</html>